<template>
    <div class="rwlb">
        <div class="rwlb-top">
            <div class="top1">
                <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                    <el-form-item label="任务名称">
                        <el-input v-model="form.taskName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="区域类型">
                        <el-select v-model="form.areaType" placeholder="请选择">
                            <el-option v-for="item in qylx" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单元名称">
                        <el-cascader v-model="form.areaName" :options="xzqhdata" :props="xzqhprop" ref="xzqh"
                            @change="xzqhorgChange" :clearable="true">
                        </el-cascader>
                    </el-form-item>
                    <span class="tqy">
                        <el-form-item label="提取源">
                            <el-select v-model="form.extractSource" placeholder="请选择">
                                <el-option v-for="item in tqy" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <!-- <el-form-item label="提取周期">
                        <el-select v-model="form.extractType" placeholder="请选择">
                            <el-option v-for="item in tqsd" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="循环周期">
                        <el-select v-model="form.cycleType" placeholder="请选择">
                            <el-option v-for="item in xhzq" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <span class="zhuangtai">
                        <el-form-item label="状态">
                            <el-select v-model="form.status" placeholder="请选择">
                                <el-option v-for="item in status" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span> -->
                </el-form>
                <div class="top1-button">
                    <el-button size="default" @click="chaxun"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
                    <el-button size="default" @click="chongzhi"><i class="el-icon-refresh"></i> 重 置</el-button>
                </div>
            </div>
            <div class="top-button">
                <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                    <!-- <el-form-item label="任务名称">
                        <el-input v-model="form.taskName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="区域类型">
                        <el-select v-model="form.areaType" placeholder="请选择">
                            <el-option v-for="item in qylx" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单元名称">
                        <el-cascader v-model="form.areaName" :options="xzqhdata" :props="xzqhprop" ref="xzqh"
                            @change="xzqhorgChange" :clearable="true">
                        </el-cascader>
                    </el-form-item>
                    <span class="tqy">
                        <el-form-item label="提取源">
                            <el-select v-model="form.extractSource" placeholder="请选择">
                                <el-option v-for="item in tqy" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span> -->
                    <el-form-item label="提取周期">
                        <el-select v-model="form.extractType" placeholder="请选择">
                            <el-option v-for="item in tqsd" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="循环周期">
                        <el-select v-model="form.cycleType" placeholder="请选择">
                            <el-option v-for="item in xhzq" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <span class="zhuangtai">
                        <el-form-item label="状态">
                            <el-select v-model="form.status" placeholder="请选择">
                                <el-option v-for="item in status" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                </el-form>
                <div class="top2-button">
                    <el-button size="default" @click="plshanchu"><i class="el-icon-delete"></i> 删 除</el-button>
                    <el-button size="default" @click="xinzeng"><i class="el-icon-plus"></i> 新 增</el-button>
                </div>
            </div>
        </div>
        <div class="rwlb-middle">
            <el-table class="tableBox" :data="tableData" border @selection-change="handleSelectChange" stripe height="86.5%"
                :row-class-name="tableRowClassName" :header-cell-style="{ background: '#b2dffe', color: '#000' }"
                style="width: 100%">
                <el-table-column type="selection" align="center" width="50">
                </el-table-column>
                <el-table-column type="index" align="center" label="序号" width="50" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-text="pagesize * (currentPage - 1) + 1 + scope.$index"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" align="center" label="状态" width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" active-color="#B9B9B9"
                            inactive-color="#02538C" @change="changeSwitch(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="taskName" label="任务名称" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        {{ scope.row.areaName }}{{ scope.row.taskName }}
                    </template>
                </el-table-column>
                <el-table-column prop="stationCount" label="测站数量" width="80" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <a href="#" @click="czsldhk(scope.row)">{{ scope.row.stationCount }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="areaType" label="区域类型" width="90" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.areaType == 1">行政区</span>
                        <span v-if="scope.row.areaType == 2">平原区</span>
                        <span v-if="scope.row.areaType == 3">超采区</span>
                        <span v-if="scope.row.areaType == 4">管控区</span>
                        <span v-if="scope.row.areaType == 5">山丘区</span>
                    </template>
                </el-table-column>
                <el-table-column prop="areaName" label="单元名称" width="100" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="extractSource" label="提取源" :show-overflow-tooltip="true" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.extractSource == 1">实时数据</span>
                        <span v-if="scope.row.extractSource == 2">整编日均值数据</span>
                        <span v-if="scope.row.extractSource == 3">基础数据</span>
                        <span v-if="scope.row.extractSource == 6">整编年均值</span>
                    </template>
                </el-table-column>
                <el-table-column prop="extractTable" label="提取信息" :show-overflow-tooltip="true" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.extractTable == 1">水位表</span>
                        <span v-if="scope.row.extractTable == 2">水温表</span>
                        <span v-if="scope.row.extractTable == 3">泉流量表</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cycleType" label="循环周期" :show-overflow-tooltip="true" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cycleType == 1">单次循环</span>
                        <span v-if="scope.row.cycleType == 2">周期循环</span>
                    </template>
                </el-table-column>
                <el-table-column prop="extractType" label="提取周期" :show-overflow-tooltip="true" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.extractType == 1">日</span>
                        <span v-if="scope.row.extractType == 2">月</span>
                        <span v-if="scope.row.extractType == 3">季</span>
                        <span v-if="scope.row.extractType == 4">年</span>
                        <span v-if="scope.row.extractType == 5">其他</span>
                    </template>
                </el-table-column>
                <el-table-column prop="executeTime" label="执行时间" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.extractType == 1">每日 {{ scope.row.executeTime }}</span>
                        <span v-if="scope.row.extractType == 2">每月 {{ scope.row.executeTime }}</span>
                        <span v-if="scope.row.extractType == 3">
                            季
                            <span v-if="scope.row.qmonth == 1">首月</span>
                            <span v-if="scope.row.qmonth == 2">次月</span>
                            <span v-if="scope.row.qmonth == 3">末月</span>
                            {{ scope.row.executeTime }}
                        </span>
                        <span v-if="scope.row.extractType == 4">年 {{ scope.row.executeTime }}</span>
                        <span v-if="scope.row.extractType == 5">{{ scope.row.executeTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createAuthor" label="创建人" width="70" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column align="center" label="操作" width="120" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <i class="iconfont icon-chakan" title="查 看" @click="chakan(scope.row)"></i>&nbsp;
                        <i class="el-icon-edit" title="编辑" @click="bianji(scope.row)"></i>&nbsp;
                        <i class="el-icon-delete" title="删除" @click="bgshanchu(scope.row)"></i>&nbsp;
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 查看对话框 -->
        <el-dialog :visible.sync="dialogVisible" class="ckdhk" width="52%" :append-to-body="true">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>{{ this.ckform.taskName }}查看</span>
                </div>
            </div>
            <div class="center">
                <el-form :model="ckform" label-position="right" label-width="85px">
                    <el-form-item label="任务名称" style="width: 50%;">
                        <!-- <el-input v-model="ckform.taskName" style="width: 93.5%;" placeholder=""></el-input> -->
                        <span style="margin-left: 14px;">{{ ckform.taskName }}</span>
                    </el-form-item>
                    <el-form-item label="区域类型" style="width: 50%;">
                        <span v-if="ckform.areaType == 1" style="margin-left: 14px;">行政区</span>
                        <span v-if="ckform.areaType == 2" style="margin-left: 14px;">平原区</span>
                        <span v-if="ckform.areaType == 3" style="margin-left: 14px;">超采区</span>
                        <span v-if="ckform.areaType == 4" style="margin-left: 14px;">管控区</span>
                        <span v-if="ckform.areaType == 5" style="margin-left: 14px;">山丘区</span>
                    </el-form-item>
                    <el-form-item label="提取单元" style="width: 50%;">
                        <span style="margin-left: 14px;">{{ ckform.areaName }}</span>
                    </el-form-item>
                    <el-form-item label="测站数量" style="width: 50%;">
                        <span style="margin-left: 14px;">{{ ckform.stationCount }}</span>
                    </el-form-item>
                    <span class="ckdhktqy">
                        <el-form-item label="提取源" style="width: 50%;">
                            <span v-if="ckform.extractSource == 1" style="margin-left: 14px;">实时数据</span>
                            <span v-if="ckform.extractSource == 2" style="margin-left: 14px;">整编数据</span>
                            <span v-if="ckform.extractSource == 3" style="margin-left: 14px;">基础数据</span>
                            <span v-if="ckform.extractSource == 4" style="margin-left: 14px;">共享数据</span>
                            <span v-if="ckform.extractSource == 5" style="margin-left: 14px;">评价数据</span>
                            <span v-if="ckform.extractSource == 6" style="margin-left: 14px;">整编年均值</span>
                        </el-form-item>
                    </span>
                    <el-form-item label="提取信息" style="width: 50%;">
                        <!-- <el-input v-model="ckform.tqxx" style="width: 93.5%;" placeholder=""></el-input> -->
                        <span v-if="ckform.extractTable == 1" style="margin-left: 14px;">水位表</span>
                        <span v-if="ckform.extractTable == 2" style="margin-left: 14px;">水温表</span>
                        <span v-if="ckform.extractTable == 3" style="margin-left: 14px;">泉流量表</span>
                    </el-form-item>
                    <el-form-item label="是否启用" style="width: 50%;">
                        <span style="margin-left: 14px;">{{ this.ckform.status }}</span>
                    </el-form-item>
                    <el-form-item label="提取周期" style="width: 50%;">
                        <!-- <el-input v-model="ckform.tqxx" style="width: 93.5%;" placeholder=""></el-input> -->
                        <span v-if="ckform.extractType == 1" style="margin-left: 14px;">日</span>
                        <span v-if="ckform.extractType == 2" style="margin-left: 14px;">月</span>
                        <span v-if="ckform.extractType == 3" style="margin-left: 14px;">季</span>
                        <span v-if="ckform.extractType == 4" style="margin-left: 14px;">年</span>
                        <span v-if="ckform.extractType == 5" style="margin-left: 14px;">其他</span>
                    </el-form-item>
                    <el-form-item label="循环周期" style="width: 50%;">
                        <span v-if="ckform.cycleType == 1" style="margin-left: 14px;">单次循环</span>
                        <span v-if="ckform.cycleType == 2" style="margin-left: 14px;">周期循环</span>
                    </el-form-item>
                    <el-form-item label="执行时间" style="width: 50%;">
                        <span style="margin-left: 14px;">{{ ckform.executeTime }}</span>
                    </el-form-item>
                    <span v-if="ckform.cycleType == 1" style="width: 50%;">
                        <el-form-item label="提取时间" style="width: 50%;">
                            <span style="margin-left: 14px;">{{ ckform.startTime }}至{{ ckform.endTime }}</span>
                        </el-form-item>
                    </span>
                    <el-form-item label="任务描述" style="width: 50%;">
                        <!-- <el-input v-model="ckform.nt" style="width: 93.5%;" placeholder=""></el-input> -->
                        <span style="margin-left: 14px;">{{ ckform.nt }}</span>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <!-- 新增对话框 -->
        <el-dialog :visible.sync="xzdialogVisible" class="xzdhk" width="47%" :append-to-body="true" @close="clearDialog">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span class="title-text">新增数据提取任务</span>
                </div>
            </div>
            <div class="center">
                <el-form :rules="rules" :model="xzform" ref="ruleForm" class="demo-form-inline" label-position="right"
                    label-width="85px">
                    <el-form-item label="区域类型" prop="areaType" required>
                        <el-select v-model="xzform.areaType" placeholder="请选择区域类型" @change="changeareaType">
                            <el-option v-for="item in qylx1" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单元名称" prop="areaName" required>
                        <div v-if="xzform.areaType == 1 || xzform.areaType == ''"><el-cascader v-model="xzform.areaName"
                                placeholder="请选择单元名称" :options="xzqhdata1" :props="xzqhprop1" ref="xzxzqh"
                                @change="dymcchange" :clearable="true"></el-cascader>
                        </div>
                        <!-- 平原区 -->
                        <div v-if="xzform.areaType == 2">
                            <el-select v-model="xzform.areaName" placeholder="请选择">
                                <el-option v-for="item in pyqdymc" :key="item.chfcid" :label="item.chfcad"
                                    :value="item.chfcid">
                                </el-option>
                            </el-select>
                        </div>
                        <!-- 超采区 -->
                        <div v-if="xzform.areaType == 3">
                            <el-select v-model="xzform.areaName" placeholder="请选择">
                                <el-option v-for="item in ccqdymc" :key="item.odid" :label="item.odcd" :value="item.odcd">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="测站类别" prop="stationGenre" required>
                        <el-select v-model="xzform.stationGenre" placeholder="请选择测站类别" @change="changestationGenre">
                            <el-option v-for="item in czlx" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="测站选取" prop="czxq">
                        <el-select v-model="xzform.czxq" multiple collapse-tags placeholder="请选择测站" @change='changeSelect'>
                            <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
                            <el-option v-for="item in czxq" :key="item.stcd" :label="item.stnm" :value="item.stcd">
                                <span style="float: left">{{ item.stnm }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.stcd }}</span>
                            </el-option>
                        </el-select>
                        <!-- <span class="swdzcsts">*测站选取不能为空否则新增不成功</span> -->
                    </el-form-item>
                    <span class="ckdhktqy" v-if="xzform.stationGenre == 2 || xzform.stationGenre == ''">
                        <el-form-item label="提取源" prop="extracSource">
                            <el-select v-model="xzform.extracSource" placeholder="请选择提取源">
                                <el-option v-for="item in tqy" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <span class="ckdhktqy" v-if="xzform.stationGenre == 3">
                        <el-form-item label="提取源" prop="extracSource">
                            <el-select v-model="xzform.extracSource" placeholder="请选择提取源">
                                <el-option v-for="item in tqy1" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <span v-if="xzform.stationGenre == 2 || xzform.stationGenre == ''">
                        <el-form-item label="提取信息" prop="extractTable">
                            <el-select v-model="xzform.extractTable" placeholder="请选择提取信息">
                                <el-option v-for="item in tqxx" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <span v-if="xzform.stationGenre == 3 && xzform.extracSource != 2 && xzform.extracSource != 3">
                        <el-form-item label="提取信息" prop="extractTable">
                            <el-select v-model="xzform.extractTable" placeholder="请选择提取信息">
                                <el-option v-for="item in tqxx1" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <span v-if="xzform.stationGenre == 3 && xzform.extracSource == 2 && xzform.extracSource != 3">
                        <el-form-item label="提取信息" prop="extractTable">
                            <el-select v-model="xzform.extractTable" placeholder="请选择提取信息">
                                <el-option v-for="item in tqxx2" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <span v-if="xzform.stationGenre == 3 && xzform.extracSource == 3">
                        <!-- <el-form-item label="提取信息" prop="extractTable" required>
                            <el-select v-model="xzform.extractTable" placeholder="请选择提取信息">
                                <el-option v-for="item in tqxx3" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
                        &nbsp
                    </span>
                    <el-form-item label="循环周期" prop="cycleType" required>
                        <el-select v-model="xzform.cycleType" placeholder="请选择循环周期" @change="changeItemType">
                            <el-option v-for="item in xhzq" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="status" required>
                        <el-radio v-model="xzform.status" label="2">是</el-radio>
                        <el-radio v-model="xzform.status" label="1">否</el-radio>
                    </el-form-item>
                    <el-form-item label="提取周期" prop="extractType" required>
                        <div v-if="xzform.cycleType == 1 || xzform.cycleType == ''">
                            <el-select v-model="xzform.extractType" placeholder="请选择提取周期"
                                :disabled="xzform.cycleType == '1'" @change="changeextractType">
                                <el-option v-for="item in tqsd3" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-if="xzform.cycleType == 2">
                            <el-select v-model="xzform.extractType" placeholder="请选择提取周期"
                                :disabled="xzform.cycleType == '1'" @change="changeextractType">
                                <el-option v-for="item in tqsd2" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <span v-if="xzform.cycleType == '1'" class="sfljzx">
                        <!-- <el-form-item> -->
                        <el-radio v-model="xzform.sendType" label="1">立即执行</el-radio>
                        <el-radio v-model="xzform.sendType" label="2">其他时间执行</el-radio>
                        <!-- </el-form-item> -->
                    </span>
                    <!-- 如果提取周期是日，执行时间为时分秒 -->
                    <span v-if="xzform.extractType == '1' || xzform.extractType == ''" class="xzdhktqsj">
                        <el-form-item label="执行时间" prop="executeTime" required>
                            <el-time-picker type="fixed-time" v-model="xzform.executeTime" :picker-options="{
                                selectableRange: '00:00:00 - 23:59:59'
                            }" placeholder="任意时间点" value-format="HH:mm:ss" format="HH:mm:ss">
                            </el-time-picker>
                        </el-form-item>
                    </span>
                    <span v-if="xzform.extractType == '2'">
                        <el-form-item label="执行时间" prop="executeTime" class="xzdhktqsj" required>
                            <el-date-picker v-model="xzform.executeTime" type="datetime" placeholder="选择日期时间"
                                value-format="dd HH:mm:ss" format="dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </span>
                    <div v-if="xzform.extractType == '3'" style="display: flex;width: 100%;">
                        <el-form-item label="执行时间" class="xzdhktqsj">
                            <span style="display:flex;">
                                <el-select v-model="xzform.qmonth" placeholder="请选择" style="display:flex;width: 90px;">
                                    <el-option v-for="item in qmonth" :key="item.statusid" :label="item.statusname"
                                        :value="item.statusid">
                                    </el-option>
                                </el-select>
                                <el-date-picker v-model="xzform.executeTime" style="width: 132px;" type="datetime"
                                    placeholder="选择日期时间" value-format="dd HH:mm:ss" format="dd HH:mm:ss">
                                </el-date-picker>
                            </span>
                        </el-form-item>
                    </div>
                    <span v-if="xzform.extractType == '4' || xzform.extractType == '5'" class="xzdhktqsj">
                        <el-form-item label="执行时间" prop="executeTime" required>
                            <el-date-picker v-model="xzform.executeTime" type="datetime" placeholder="选择日期时间"
                                value-format="MM-dd HH:mm:ss" format="MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </span>
                    <span v-if="xzform.extractType == '5'" class="xzdhktqsj" required>
                        <el-form-item label="提取时间" prop="time">
                            <el-date-picker v-model="xzform.time" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </span>
                    <span class="xzdhktqsj" v-if="xzform.extractType == '5' && xzform.extractSource == '6'">
                        <el-form-item label="提取时间" prop="time" required>
                            <el-date-picker v-model="xzform.time" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy" format="yyyy">
                            </el-date-picker>
                        </el-form-item>
                    </span>
                    <el-form-item label="任务描述">
                        <el-input v-model="xzform.nt" placeholder="" style="width: 67%;"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
        <!-- 测站数量对话框 -->
        <el-dialog :visible.sync="czsldialogVisible" width="80%" :append-to-body="true" class="czsldhk">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>{{ this.czsldhktitle2 }}{{ this.czsldhktitle1 }}监测站信息</span>
                    <!-- <i class="el-icon-circle-close"></i>; -->
                </div>
            </div>
            <div class="center" width="100%" style="height:100%">
                <el-form :model="zxqkform" label-width="85px" size="normal" style="height:12%">
                    <el-form-item label="测站编码">
                        <el-input v-model="zxqkform.stcd" style="width:136px" placeholder="请输入测站编码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="czslcx"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
                        <el-button type="primary" @click="czslcz"><i class="el-icon-refresh"></i> 重 置</el-button>
                    </el-form-item>
                </el-form>
                <el-table class="tableBox" :data="tableData1" stripe height="85%" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center">
                        <template slot-scope="scope">
                            <div v-text="pagesize1 * (currentPage1 - 1) + 1 + scope.$index"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stcd" label="监测站编码" width="100" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="stnm" label="监测站名称" align="center" idth="100" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="addvnm" label="单元名称" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="stlc" label="监测站位置" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="lgtd" label="东经(度)" align="center" width="110" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="lttd" label="北纬(度)" align="center" width="110" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="sttp" label="监测站类别" align="center" width="100" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                            <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                            <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                            <span v-if="scope.row.sttp == 3">统测站</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bccd" label="埋藏条件" align="center" width="80" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-if="scope.row.bccd == 10">潜水</span>
                            <span v-if="scope.row.bccd == 20">承压水</span>
                            <span v-if="scope.row.bccd == 21">第Ⅰ含水岩组承压水</span>
                            <span v-if="scope.row.bccd == 22">第Ⅱ含水岩组承压水</span>
                            <span v-if="scope.row.bccd == 23">第Ⅲ含水岩组承压水</span>
                            <span v-if="scope.row.bccd == 24">第Ⅳ含水岩组承压水</span>
                            <span v-if="scope.row.bccd == 25">第Ⅴ含水岩组承压水</span>
                            <span v-if="scope.row.bccd == 26">第Ⅴ含水岩组以下承压水</span>
                            <span v-if="scope.row.bccd == 30"></span>
                            <span></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tm" label="最新监测时间" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-pagination @size-change="dhkymSizeChange" @current-change="dhkymCurrentChange"
                    :current-page.sync="currentPage1" :page-size="pagesize1" layout="total, prev, pager, next"
                    :total="total1" style="height:5%">
                </el-pagination>
            </span>
        </el-dialog>
        <!-- 修改对话框 -->
        <el-dialog :visible.sync="xgdialogVisible" class="xzdhk" width="47%" :append-to-body="true" @close="clearDialog">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span class="title-text">修改数据提取任务</span>
                </div>
            </div>
            <div class="center">
                <el-form :rules="rules" :model="xgform" class="demo-form-inline" label-position="right" label-width="85px">
                    <el-form-item label="区域类型" prop="areaType" required>
                        <el-select v-model="xgform.areaType" placeholder="请选择区域类型" @change="changeareaType" disabled>
                            <el-option v-for="item in qylx2" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单元名称" prop="areaName" required>
                        <div v-if="xgform.areaType == 1 || xgform.areaType == ''"><el-cascader v-model="xgform.areaName"
                                :placeholder="xgform.areaName" :options="xzqhdata2" :props="xzqhprop2" ref="xzxzqh"
                                @change="dymcchange" :clearable="true" disabled></el-cascader>
                        </div>
                    </el-form-item>
                    <el-form-item label="测站类别" prop="stationGenre">
                        <el-select v-model="xgform.stationGenre" placeholder="请选择测站类别" disabled>
                            <el-option v-for="item in czlx" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="测站选取" prop="czxq">
                        <el-select v-model="xgform.czxq" multiple collapse-tags placeholder="请选择测站" disabled>
                            <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
                            <el-option v-for="item in czxq" :key="item.stcd" :label="item.stnm" :value="item.stcd">
                                <span style="float: left">{{ item.stnm }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.stcd }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <span class="ckdhktqy">
                        <el-form-item label="提取源" prop="extracSource">
                            <el-select v-model="xgform.extracSource" :placeholder="xgform.extractSource" disabled>
                                <el-option v-for="item in tqy2" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <!-- <span class="ckdhktqy" v-if="xgform.stationGenre == 3">
                        <el-form-item label="提取源" prop="extracSource">
                            <el-select v-model="xgform.extracSource" :placeholder="xgform.extractSource" disabled>
                                <el-option v-for="item in tqy3" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </span> -->
                    <span v-if="xgform.stationGenre == 2 || xgform.stationGenre == ''">
                        <el-form-item label="提取信息" prop="extractTable">
                            <el-select v-model="xgform.extractTable" placeholder="请选择提取信息">
                                <el-option v-for="item in tqxx" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <span v-if="xgform.stationGenre == 3 && xgform.extracSource != 2 && xgform.extracSource != 3">
                        <el-form-item label="提取信息" prop="extractTable">
                            <el-select v-model="xgform.extractTable" placeholder="请选择提取信息">
                                <el-option v-for="item in tqxx1" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <span v-if="xgform.stationGenre == 3 && xgform.extracSource == 2 && xgform.extracSource != 3">
                        <el-form-item label="提取信息" prop="extractTable">
                            <el-select v-model="xgform.extractTable" placeholder="请选择提取信息">
                                <el-option v-for="item in tqxx2" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <span v-if="xgform.stationGenre == 3 && xgform.extracSource == 3">
                        <el-form-item label="提取信息" prop="extractTable">
                            <el-select v-model="xgform.extractTable" placeholder="请选择提取信息">
                                <el-option v-for="item in tqxx3" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <el-form-item label="循环周期" prop="cycleType">
                        <el-select v-model="xgform.cycleType" placeholder="请选择循环周期" @change="changeItemType1">
                            <el-option v-for="item in xhzq" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="status">
                        <el-radio v-model="xgform.status" label="2">是</el-radio>
                        <el-radio v-model="xgform.status" label="1">否</el-radio>
                    </el-form-item>
                    <el-form-item label="提取周期" prop="extractType">
                        <div v-if="xgform.cycleType == 1 || xgform.cycleType == ''">
                            <el-select v-model="xgform.extractType" placeholder="请选择提取周期"
                                :disabled="xgform.cycleType == '1'" @change="changeextractType1">
                                <el-option v-for="item in tqsd1" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-if="xgform.cycleType == 2">
                            <el-select v-model="xgform.extractType" placeholder="请选择提取周期"
                                :disabled="xgform.cycleType == '1'" @change="changeextractType1">
                                <el-option v-for="item in tqsd4" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <span v-if="xgform.cycleType == '1'" class="sfljzx">
                        <!-- <el-form-item> -->
                        <el-radio v-model="xgform.sendType" label="1">立即执行</el-radio>
                        <el-radio v-model="xgform.sendType" label="2">其他时间执行</el-radio>
                        <!-- </el-form-item> -->
                    </span>
                    <!-- 如果提取周期是日，执行时间为时分秒 -->
                    <span v-if="xgform.extractType == '1' || xgform.extractType == ''" class="xzdhktqsj">
                        <el-form-item label="执行时间" prop="executeTime">
                            <el-time-picker type="datetime" v-model="xgform.executeTime" :picker-options="{
                                selectableRange: '00:00:00 - 23:59:59'
                            }" placeholder="任意时间点" value-format="HH:mm:ss" format="HH:mm:ss">
                            </el-time-picker>
                        </el-form-item>
                    </span>
                    <span v-if="xgform.extractType == '2'" class="xzdhktqsj">
                        <el-form-item label="执行时间" prop="executeTime">
                            <el-date-picker v-model="xgform.executeTime" type="datetime" placeholder="选择日期时间"
                                value-format="dd HH:mm:ss" format="dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </span>
                    <div v-if="xgform.extractType == '3'" style="display: flex;width: 100%;">
                        <el-form-item label="执行时间" class="xzdhktqsj">
                            <span style="display:flex;">
                                <el-select v-model="xgform.qmonth" placeholder="请选择" style="display:flex;width: 90px;">
                                    <el-option v-for="item in qmonth1" :key="item.statusid" :label="item.statusname"
                                        :value="item.statusid">
                                    </el-option>
                                </el-select>
                                <el-date-picker v-model="xgform.executeTime" style="width: 132px;" type="datetime"
                                    placeholder="选择日期时间" value-format="dd HH:mm:ss" format="dd HH:mm:ss">
                                </el-date-picker>
                            </span>
                        </el-form-item>
                    </div>
                    <span v-if="xgform.extractType == '4' || xgform.extractType == '5'" class="xzdhktqsj">
                        <el-form-item label="执行时间" prop="executeTime">
                            <el-date-picker v-model="xgform.executeTime" type="datetime" placeholder="选择日期时间"
                                value-format="MM-dd HH:mm:ss" format="MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </span>
                    <span v-if="xgform.extractType == '5'">
                        <el-form-item label="提取时间" prop="time">
                            <el-date-picker v-model="xgform.time" type="datetimerange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd" disabled>
                            </el-date-picker>
                        </el-form-item>
                    </span>
                    <span v-if="xgform.extractType == '5' && xgform.extractSource == '6'">
                        <el-form-item label="提取时间" prop="time">
                            <el-date-picker v-model="xgform.time" type="daterange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy" format="yyyy" disabled>
                            </el-date-picker>
                        </el-form-item>
                    </span>
                    <el-form-item label="任务描述">
                        <el-input v-model="xgform.nt" placeholder="" style="width: 67%;"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="xgdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="bjqd">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
// 列表、区域类型、单元名称、提取源、提取周期、循环周期、状态、查询、重置
import $ from 'jquery'
import { qylx, xzqhlist, sjtqrwlblist, sjtqrwlbplsc, sjtqrwlbczxq, sjtqrwlbxzqd, sjtqrwlbbjxg, sjtqrwlbczsldhk, sjtqccqdymccz, sjtqrwlbxgzt, sjtqrwlbiconsc, sjtqccqdymc, sjtqpyqdymc, sjtqpyqdymcczxq } from '@/api/index'
export default {
    data() {
        return {
            // 主页头部表单
            form: {
                taskName: '',//任务名称输入框
                areaType: '',//区域类型下拉框
                areaName: '220000',//单元名称级联选择器
                extractSource: '',//提取源
                extractType: '',//提取周期
                cycleType: '',//循环周期下拉框
                status: '',//状态下拉框
            },
            qylx: [],// 区域类型下拉框数组
            qylx1: [],//新增对话框的区域类型下拉框
            qylx2: [],//修改对话框的区域类型下拉框
            xzqhdata: [],// 单元名称下拉框数组//行政区划
            xzqhprop: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            pyqdymc: [],//平原区--单元名称
            ccqdymc: [],//超采区--单元名称
            gkqdymc: [],//管控区--单元名称
            sqqdymc: [],//山丘区--单元名称
            checked: false,
            xzqhdata1: [],// 单元名称下拉框数组//行政区划
            xzqhprop1: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            xzqhdata2: [],// 单元名称下拉框数组//行政区划
            xzqhprop2: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            areadata: [],// 单元名称下拉框数组//行政区划
            areaprop: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            tqy: [], // 新增 提取源下拉框数组，当测站类别为水利国家站的时候
            tqy1: [],//新增 提取源下拉框数组1，当测站类别为自然资源站的时候
            tqy2: [], // 编辑对话框提取源下拉框数组，当测站类别为水利国家站的时候
            tqy3: [],//编辑 提取源下拉框数组1，当测站类别为自然资源站的时候
            tqsd: [],// 提取周期下拉框数组
            tqsd1: [],//编辑对话框
            tqsd3: [],//新增对话框提取时段
            tqsd2: [],//新增对话框中，循环周期时候，去掉其他
            tqsd4: [],//编辑，去掉其他
            xhzq: [],// 循环周期下拉框数组
            status: [],// 状态下拉框数组
            tableData: [],// 主页表格内容
            // 底部页码
            pagesize: 10,
            currentPage: 1,
            total: 10,
            dialogVisible: false,//查看对话框
            // 查看对话框的表单
            ckform: {
                taskName: '',//任务名称
                areaType: '',//区域类型
                areaName: '',//提取单元
                stationCount: '',//测站数量
                extracSource: '',//提取源
                extractTable: '',//提取信息
                extractType: '',//提取周期
                executeTime: '',//执行时间
                cycleType: '',//循环周期
                status: '',//是否启用
                nt: '',// 任务描述
                zxqk: '',//执行情况
                startTime: '',
                endTime: ''
            },
            xzdialogVisible: false,//新增对话框
            czxq: [], // 新增对话框的测站选取下拉框内容
            czxq1: [],//修改对话框测站选取
            tqxx: [], // 新增对话框提取信息下拉框内容,当测站类别为水利国家站的时候
            tqxx1: [],//新增对话框提取信息下拉框内容，当测站类别为自然资源站的时候
            tqxx2: [],//新增对话框提取信息下拉框内容，当测站类别为自然资源，并且提取源为整编数据的时候
            tqxx3: [],//新增对话框提取信息下拉框内容，当测站类别为自然资源，并且提取源为基础数据的时候
            // 新增对话框的表单
            xzform: {
                areaType: '',//区域类型
                areaName: '',//单元名称
                czxq: '',//测站选取
                extracSource: '',//提取源
                extractTable: '',//提取信息
                extractType: '',//提取周期
                executeTime: '',//执行时间
                cycleType: '',//循环周期
                status: '2',//是否启用
                nt: '',// 任务描述
                time: '',
                sendType: '',//立即执行
                stationGenre: '',//测站类别
                time1: '',
                time2: '',
                qmonth: '',//季度
            },
            qmonth: [],//季度，新增
            qmonth1: [],//季度月份，编辑
            multipleSelection: [],//获取的多组测站的数据
            czsldialogVisible: false,//测站数量对话框
            // 测站数量对话框的表单
            zxqkform: {
                stcd: '',//测站编码
                stnm: '',//测站名称
                addvcd: '',//单元名称
                sttp: '',//测站类别
            },
            tableData1: [],// 测站数量对话框基本信息数组
            czsldhktitle1: '',//测站数量对话框title
            czsldhktitle2: '',
            addlb: [],// 测站数量测站类别下拉框内容
            // 底部页码
            pagesize1: 10,
            currentPage1: 1,
            total1: 10,
            xgdialogVisible: false,//修改或编辑对话框
            // 修改对话框表单
            xgform: {
                areaType: '',//区域类型
                areaName: '',//单元名称
                czxq: '',//测站选取
                extractSource: '',//提取源
                tqxx: '',//提取信息
                extractType: '',//提取周期
                executeTime: '',//执行时间
                cycleType: '',//循环周期
                status: '',//是否启用
                taskName: '',// 任务描述
                time: '',//具体时间
                id: '',//测站，行id
                time1: '',//开始时间
                time2: '',//结束时间
                sendType: '',//立即发送
                qmonth: '',
            },
            addvcd: '220000',//设置默认的省编码
            areaCode: '',
            stcdArray: [],
            addvnm: '',//行政区划id
            chfcid: '',//平原区id
            czlx: [],
            // 下面是测站数量对话框里面的查询
            areaCode1: '',
            areaType1: '',
            stationGenre1: '',
            stcd1: '',
            stationGenre: '',//新增对话框测站类别
            rules: {
                // 区域类型
                areaType: [
                    { required: true, message: '请选择区域类型', trigger: 'change' },
                ],
                // 单元名称
                areaName: [
                    { required: true, message: '请选择单元名称', trigger: 'change' },
                ],
                // 测站类别
                stationGenre: [
                    { required: true, message: '请选择测站类别', trigger: 'change' },
                ],
                // 测站选取
                czxq: [
                    { required: false, message: '请选择测站', trigger: 'change' },
                ],
                // 提取源
                extracSource: [
                    { required: true, message: '请选择提取源', trigger: 'change' },
                ],
                // 提取信息
                extractTable: [
                    { required: true, message: '请选择提取信息', trigger: 'change' }
                ],
                // 提取周期
                extractType: [
                    { required: true, message: '请选择提取周期', trigger: 'change' }
                ],
                // 循环周期
                cycleType: [
                    { required: true, message: '请选择循环周期', trigger: 'change' }
                ],
                // 执行时间
                // executeTime: [
                //     { type: 'date', required: true, message: '请选择执行时间', trigger: 'change' }
                // ],
                // // 具体时间
                // time: [
                //     { type: 'date', required: true, message: '请选择具体时间', trigger: 'change' }
                // ],
                // 状态
                status: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],
            }
        }
    },
    mounted() {
        this.qylxobj();//获取区域类型
        this.xzqhlist();//获取行政区划
        this.sjtqrwlblist();//获取表格数据
    },
    methods: {
        // 获取行政区划
        async xzqhlist() {
            const res = await xzqhlist(this.addvcd)
            // console.log(res.data.data);
            this.xzqhdata = res.data.data
            this.xzqhdata1 = res.data.data//新增
            this.xzqhdata2 = res.data.data
            this.areadata = res.data.data
        },
        // 获取区域类型数据
        async qylxobj() {
            const govern_type = "area_type"
            const res = await qylx(govern_type)
            // console.log(res);//200
            this.qylx = res.data.data
            this.qylx1 = res.data.data
            this.qylx2 = res.data.data
            // console.log(this.qylx);
            // 获取提取源数据
            const res1 = "extract_source"
            const tqy = await qylx(res1)
            this.tqy = tqy.data.data
            // console.log(this.tqy);
            this.tqy2 = tqy.data.data
            this.tqy.map((item, index, arr) => {
                if (item.statusid == 6) {
                    return;
                }
                else {
                    this.tqy1.push(item)
                }
            })
            this.tqy2.map((item, index, arr) => {
                // console.log(item);
                if (item.statusid == 6) {
                    return;
                }
                else {
                    this.tqy3.push(item)
                }
            })
            // extract_type
            // 获取提取周期数据
            const tqsd = 'extract_type'
            const res2 = await qylx(tqsd)
            // console.log(res2);
            this.tqsd = res2.data.data//顶部
            this.tqsd1 = res2.data.data//编辑
            this.tqsd3 = res2.data.data//新增1
            this.tqsd3.map((item, index, arr) => {
                if (item.statusid == 5) {
                    return
                } else {
                    this.tqsd2.push(item)
                }
            })
            this.tqsd1.map((item, index, arr) => {
                if (item.statusid == 5) {
                    return
                } else {
                    this.tqsd4.push(item)
                }
            })
            // cycle_type
            // 获取循环周期数据
            const xhzq = 'cycle_type'
            const res3 = await qylx(xhzq)
            // console.log(res3);
            this.xhzq = res3.data.data
            this.xhzq1 = res3.data.data
            // task_status
            // 获取状态数据
            const zt = 'task_status'
            const res4 = await qylx(zt)
            // console.log(res4);
            this.status = res4.data.data
            // 获取qmonth
            const jiyue = 'qmonth'
            const res10 = await qylx(jiyue)
            // console.log(res10);
            this.qmonth = res10.data.data
            this.qmonth1 = res10.data.data
            const tqxx = 'extract_table'
            const res5 = await qylx(tqxx)
            // console.log(res5);
            this.tqxx = res5.data.data
            this.tqxx.map((item, index, arr) => {
                if (item.statusid == 3) {
                    return
                }
                else {
                    this.tqxx1.push(item)
                }
            })
            // console.log(this.tqxx1);
            this.tqxx1.map((item, index, arr) => {
                if (item.statusid == 2) {
                    return
                } else {
                    this.tqxx2.push(item)
                }
                // console.log(this.tqxx2);
            })
            // console.log(this.tqxx);
            const zt1 = 'sttp'
            const res6 = await qylx(zt1)
            // console.log(res4);
            this.addlb = res6.data.data
            const zt2 = 'station_genre'
            const res7 = await qylx(zt2)
            // console.log(res7);
            // this.czlx = res7.data.data
            res7.data.data.map((item, index, arr) => {
                if (item.statusid == 1) {
                    return;
                }
                else {
                    this.czlx.push(item)
                }
                // console.log(this.czlx);
            })
        },
        // 获取表格数据
        async sjtqrwlblist() {
            const rwlbobj = {
                addvcd: this.form.areaName,//行政区划，单元名称
                areaType: this.form.areaType,//区域类型
                cycleType: this.form.cycleType,//循环周期
                extractSource: this.form.extractSource,//提取源
                extractType: this.form.extractType,//提取周期
                pageInfo: {
                    pageIndex: this.currentPage,//当前页
                    pageSize: this.pagesize//每页多少条
                },
                status: this.form.status,//状态
                taskName: this.form.taskName,//任务名称
            }
            const res = await sjtqrwlblist(JSON.stringify(rwlbobj))
            // console.log(res);
            this.tableData = res.data.data.list
            this.total = res.data.data.total
        },
        // 下拉框自动关闭,选择后触发事件
        xzqhorgChange(val) {
            this.form.areaName = val.slice(-1).toString();
            this.$refs.xzqh.dropDownVisible = false;
        },
        // 新增对话框中选择了区域不同，单元名称显示也不同。
        changeareaType(val) {
            // console.log(val);
            if (val == '1') {
                // 区域类型为行政区时，对接行政区划的接口
                xzqhlist(this.addvcd).then(res => {
                    // console.log(res);
                    this.xzqhdata = res.data.data
                    this.xzqhdata1 = res.data.data//新增
                    this.xzqhdata2 = res.data.data
                    this.areadata = res.data.data
                })
            } else if (val == '2') {
                // 区域类型为平原区的时候，对接平原区的接口
                sjtqpyqdymc(this.addvcd).then(res => {
                    this.pyqdymc = res.data.data
                })
            } else if (val == '3') {
                // 区域类型为超采区的时候，对接超采区的接口
                sjtqccqdymc(this.addvcd).then(res => {
                    // console.log(res);
                    this.ccqdymc = res.data.data
                    console.log(this.ccqdymc);
                })
            } else if (val == '4') {

            } else if (val == '5') {

            }
        },
        // 新增对话框的测站类别选择
        changestationGenre(val) {
            // console.log(val);
            this.xzform.stationGenre = val
            this.zhixin()
            if (this.xzform.areaType == 1) {
                this.zhixin()
            } else if (this.xzform.areaType == 2) {
                this.zhixing1()
            } else if (this.xzform.areaType == 3) {
                this.zhixing2()
            }
        },
        // 根据单元名称为行政区划时候，获取测站选取
        dymcchange(val) {
            // console.log(val)
            this.xzform.areaName = val.slice(-1).toString();
            this.$refs.xzxzqh.dropDownVisible = false;
        },
        // 新增对话框执行测站选取的接口
        zhixin() {
            console.log(this.xzform.areaName, this.xzform.stationGenre);
            if (this.xzform.areaName && this.xzform.stationGenre) {
                sjtqrwlbczxq(this.xzform.areaName, this.xzform.stationGenre).then(res => {
                    // console.log(res);
                    this.czxq = res.data.data
                    // console.log(this.czxq);
                })
            }
        },
        // 新增对话框根据平原区和测站类别获取测站选取
        zhixing1() {
            if (this.xzform.areaName && this.xzform.stationGenre) {
                sjtqpyqdymcczxq(this.xzform.areaName, this.xzform.stationGenre).then(res => {
                    // console.log(res);
                    this.czxq = res.data.data
                    // console.log(this.czxq);
                })
            }
        },
        // 新增对话框根据超采区和测站类别获取测站选取
        zhixing2() {
            if (this.xzform.areaName && this.xzform.stationGenre) {
                sjtqccqdymccz(this.xzform.areaName, this.xzform.stationGenre).then(res => {
                    // console.log(res);
                    this.czxq = res.data.data
                    // console.log(this.czxq);
                })
            }
        },
        // 根据单元名称为平原区的时候，获取测站选取
        dymcchange1(val) {
            this.zhixing1()
        },
        // 根据单元名称为超采区的时候，获取测站选择
        dymcchange2(val) {
            this.zhixing2()
        },
        // 测站数量对话框里面的---切割行政区划的级联选择器
        czslorgChange(val) {
            this.zxqkform.addvcd = val.slice(-1).toString();
            this.$refs.czslxzqh.dropDownVisible = false;
        },
        // 行政区划改变，
        xgqhorgChange(val) {
            this.xgform.areaName = val.slice(-1).toString();
            this.$refs.area.dropDownVisible = false;
            sjtqrwlbczxq(this.xgform.areaName).then(res => {
                // console.log(res);
                this.czxq1 = res.data.data
                // console.log(this.czxq);
            })
        },
        // 关闭新增对话框之后清空内容
        clearAdd() {
            this.xzform = {
                areaType: '',//区域类型
                areaName: '',//单元名称
                czxq: '',//测站选取
                extracSource: '',//提取源
                extractTable: '',//提取信息
                extractType: '',//提取周期
                executeTime: '',//执行时间
                cycleType: '',//循环周期
                status: '2',//是否启用
                nt: '',// 任务描述
                time: '',
                sendType: '',//立即执行
                stationGenre: '',//测站类别
                time1: '',
                time2: '',
            }
            this.$refs['ruleForm'].resetFields()
        },
        // 关闭新增对话框之后，填写的内容自动清除
        clearDialog(val) {
            this.clearAdd()
            this.xzdialogVisible = false
            // this.xzform = this.$options.data().xzform;
            // async () => {
            //     this.$refs[formName].resetFields();
            // }
        },
        clearDialog1(val) {
            this.xgform = this.$options.data().xgform;
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            this.sjtqrwlblist();
        },
        // 测站数量对话框页码
        dhkymCurrentChange(val) {
            this.currentPage1 = val
            const rwlbsldhkobj = {
                pageInfo: {
                    pageIndex: this.currentPage1,
                    pageSize: this.pagesize1
                },
                stationGenre: row.stationGenre,
                stcd: '',
                taskId: row.id
            }
            // console.log(rwlbsldhkobj);
            sjtqrwlbczsldhk(JSON.stringify(rwlbsldhkobj)).then(res => {
                // console.log(res);
                this.tableData1 = res.data.data.list
                this.total1 = res.data.data.total
            })
            // this.czsldhk();
        },
        dhkymSizeChange() {

        },
        // 新增对话框中选择循环周期不同，提取周期也不同
        changeItemType(val) {
            // console.log(val);
            if (this.xzform.cycleType == '1') {
                this.xzform.extractType = '5'
            } else if (this.xzform.cycleType == '2') {
                this.xzform.extractType = '1'
            }
            // console.log(this.xzform.cycleType);
        },
        // 新增对话框中选择了提取周期不同，具体时间显示也不同
        changeextractType(val) {
        },
        // 修改对话框中选择了提取周期不同，具体时间显示也不同
        changeextractType1(val) {
        },
        // 修改对话框，选取时段为其他的时候，循环周期默认显示为单次循环
        changeItemType1(val) {
            // console.log(val);
            if (this.xgform.cycleType == '1') {
                this.xgform.extractType = '5'
            } else if (this.xgform.cycleType == '2') {
                this.xgform.extractType = this.xhzq.item
            }
            // console.log(this.xzform.cycleType);
        },
        // 修改状态
        changeSwitch(row) {
            // console.log(row);
            const xiugaizhuangtaiobj = {
                areaCode: '',
                areaName: '',
                areaType: '',
                createAuthor: '',
                createTime: '',
                cycleType: '',
                endTime: '',
                executeTime: '',
                extractSource: '',
                extractSourceNm: '',
                extractTable: '',
                extractType: '',
                extractTypeNm: '',
                id: row.id,
                isDelete: '',
                nt: '',
                sendType: '',
                startTime: '',
                stationCount: '',
                stationGenre: '',
                status: row.status,
                stcdArray: [],
                taskCron: '',
                taskId: '',
                taskName: '',
                ts: ''
            }
            // console.log(xiugaizhuangtaiobj);
            sjtqrwlbxgzt(JSON.stringify(xiugaizhuangtaiobj)).then(res => {
                // console.log(res);
                if (res.data.code == 200) {
                    // this.$message({
                    //     type: 'success',
                    //     duration: 3000,
                    //     // message: '状态修改成功'
                    // })
                    this.sjtqrwlblist();
                } else {
                    // this.$message({
                    //     type: 'error',
                    //     duration: 3000,
                    //     // message: '状态修改失败'
                    // })
                }
            })
        },
        // 表格的隔行颜色改变
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'statistiss-row'
            } else {
                return ''
            }
        },
        // 查看对话框
        chakan(row) {
            // console.log(row);
            this.ckform = row
            this.ckform.taskName = row.taskName
            this.dialogVisible = true
            // console.log(row.status);
            // 通过判断，将数字改为汉字
            if (row.status = '1') {
                row.status = '是'
            } else if (row.status = '2') {
                row.status = '否'
            }
            // 提取信息，设置默认值
            this.ckform.tqxx = ''
        },
        // 查询
        chaxun() {
            this.sjtqrwlblist()
        },
        // 重置
        chongzhi() {
            this.form.taskName = ''
            this.form.areaType = ''
            this.form.areaName = '220000'
            this.form.extractSource = ''
            this.form.extractType = ''
            this.form.cycleType = ''
            this.form.status = ''
            this.sjtqrwlblist()
        },
        // 获取多组测站数据
        handleSelectChange(val) {
            // console.log(val);
            this.multipleSelection = val
            // console.log(this.multipleSelection);
        },
        // 批量删除
        plshanchu() {
            let arr = []
            for (let i = 0; i < this.multipleSelection.length; i++) {
                arr.push(this.multipleSelection[i].id)
            }
            // 将数组内的值从小到大排序，
            arr.sort()
            let arr1 = arr.sort()
            console.log(arr1);
            sjtqrwlbplsc(arr1).then(res => {
                console.log(res);
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        duration: 3000,
                        message: '删除成功'
                    })
                    this.sjtqrwlblist();
                } else {
                    this.$message({
                        type: 'error',
                        duration: 3000,
                        message: '删除失败'
                    })
                }
            })
        },
        // 新增对话框
        xinzeng() {
            this.xzdialogVisible = true
            // console.log('新增');
            // sjtqrwlbczxq(this.xzform.areaName).then(res => {
            //     // console.log(res);
            //     this.czxq = res.data.data
            //     console.log(this.czxq);
            // })
        },
        // 新增保存
        submitForm(ruleForm) {
            const rwlbxzobj = {
                areaCode: this.xzform.areaName,//
                areaName: '',//单元名称
                areaType: this.xzform.areaType,//区域类型
                createAuthor: '',//创建人
                createTime: '',
                cycleType: this.xzform.cycleType,//循环周期
                endTime: this.xzform.time[1],
                executeTime: this.xzform.executeTime,//执行时间
                extractSource: this.xzform.extracSource,//提取源
                extractSourceNm: '',
                extractTable: this.xzform.extractTable,//提取信息
                extractType: this.xzform.extractType,//提取周期
                extractTypeNm: '',
                id: '',
                isDelete: '',
                nt: this.xzform.nt,
                sendType: this.xzform.sendType,
                startTime: this.xzform.time[0],
                stationCount: this.xzform.czxq.length,
                stationGenre: this.xzform.stationGenre,
                status: '',
                stcdArray: this.stcdArray,//测站选取的数组
                taskCron: '',
                taskId: '',
                taskName: this.xzform.areaName,//任务名称
                ts: '',
                qmonth: this.xzform.qmonth
            }
            // console.log(this.stcdArray.length);
            if (this.stcdArray.length == 0) {
                this.$message({
                    type: 'error',
                    duration: 3000,
                    message: '新增失败,测站选取不能为空'
                })
                return
            } else {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.$confirm('确定添加该任务？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(async () => {
                            const res = await sjtqrwlbxzqd(JSON.stringify(rwlbxzobj))
                            // console.log(res);
                            if (res.status == 200) {
                                this.$message({
                                    type: 'success',
                                    duration: 3000,
                                    message: '新增成功'
                                })
                                this.xzdialogVisible = false
                                this.sjtqrwlblist();
                            } else {
                                this.$message({
                                    type: 'error',
                                    duration: 3000,
                                    message: '新增失败'
                                })
                            }
                        })
                        // sjtqrwlbxzqd(JSON.stringify(rwlbxzobj)).then(res => {
                        //     // console.log(res);

                        // })

                        // alert('1')
                        // this.$message({
                        //     type: 'success',
                        //     message: '新增成功',
                        //     duration: 1000
                        // })
                        // this.timer = setTimeout(() => {
                        //     this.$router.push('/layout')
                        // }, 1000);
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            }
        },
        // 取消重置
        resetForm(formName) {
            // console.log(22);
            this.xzdialogVisible = false
            this.$refs[formName].resetFields();
        },
        // 新增对话框测站选取的选择
        changeSelect(val) {
            console.log(val.length);
            this.checked = true
            if (val.length === this.xzform.czxq.length) {
                this.checked = true
            } else {
                this.checked = false
            }
            // this.stcd = this.xzform.czxq.toString()
            this.stcdArray = this.xzform.czxq
            console.log(this.stcdArray);
        },
        // 控制测站选取的选择
        changexz(val) {
            // this.checked = true
            if (val.length === this.xgform.czxq.length) {
                this.checked = true
            } else {
                this.checked = false
            }
            // console.log(this.xzform.czxq.length)
            // console.log(this.xzform.czxq.toString())
            this.stcd = this.xzform.czxq.toString()
            console.log(this.stcd);
            // console.log(this.stcd.length)
        },
        // 测站选取，新增对话框的测站选取的全选
        selectAll() {
            this.xzform.czxq = []
            // console.log(this.xzform.czxq);
            if (this.checked) {
                this.czxq.map((item) => {
                    this.xzform.czxq.push(item.stcd)
                })
            } else {
                this.xzform.czxq = []
            }
            // console.log(this.xzform.czxq);
            this.stcdArray = this.xzform.czxq
            // console.log(this.stcdArray);
        },
        // 测站选取，，，，修改对话框的测站选取的全选
        selectAlls() {
            // this.xgform.czxq = []
            if (this.checked) {
                this.czxq1.map((item) => {
                    this.xgform.czxq.push(item.stcd)
                })
            } else {
                this.xgform.czxq = []
            }
        },
        // 编辑对话框
        bianji(row) {
            this.xgdialogVisible = true
            this.xgform = row
            this.xgform.areaType = row.areaType
            this.xgform.areaName = row.areaName
            // this.xgform.czxq = row.stationCount
            console.log(row);
            this.xgform.extractSource = row.extractSource
            // console.log(this.xgform.extractSource);
            this.xgform.extractTable = row.extractTable
            // 修改的内容
            this.xgform.stationGenre = row.stationGenre
            this.xgform.extractType = row.extractType//提取周期
            this.xgform.cycleType = row.cycleType//循环周期
            this.xgform.executeTime = row.executeTime//
            this.xgform.sendType = row.sendType
            this.xgform.id = row.id
            // console.log(this.xgform.extractType);
            this.xgform.status = row.status
            this.xgform.time1 = row.time1
            this.xgform.time2 = row.time2
            this.xgform.qmonth = row.qmonth
            console.log(this.xgform.status);
            // console.log(row);
        },
        // 编辑确定
        bjqd() {
            this.xgdialogVisible = false
            // this.xgform.time = this.xgform.time.join(',')
            // console.log(this.xgform.time[0]);
            const bjxgobj = {
                cycleType: this.xgform.cycleType,
                endTime: this.xgform.time2,
                executeTime: this.xgform.executeTime,
                extractType: this.xgform.extractType,
                id: this.xgform.id,
                nt: this.xgform.taskName,
                sendType: "",
                startTime: this.xgform.time1,
                status: "",
                qmonth: this.xgform.qmonth
            }

            // console.log(bjxgobj);
            sjtqrwlbbjxg(JSON.stringify(bjxgobj)).then(res => {
                // console.log(res);
                if (res.data.code == 200) {
                    this.$message({
                        type: 'success',
                        duration: 3000,
                        message: '修改成功'
                    })
                    this.sjtqrwlblist();
                } else {
                    this.$message({
                        type: 'error',
                        duration: 3000,
                        message: '修改失败'
                    })
                }
            })
        },
        // 测站数量对话框
        czsldhk(row) {
            console.log(row);
            // this.areaCode = row.areaCode
            this.czsldhktitle1 = row.taskName
            this.czsldhktitle2 = row.areaName
            this.czsldialogVisible = true
            const rwlbsldhkobj = {
                pageInfo: {
                    pageIndex: this.currentPage1,
                    pageSize: this.pagesize1
                },
                stationGenre: row.stationGenre,
                stcd: '',
                taskId: row.id
            }
            // console.log(rwlbsldhkobj);
            sjtqrwlbczsldhk(JSON.stringify(rwlbsldhkobj)).then(res => {
                // console.log(res);
                this.tableData1 = res.data.data.list
                this.total1 = res.data.data.total
            })
            this.areaCode1 = row.areaCode.trim()
            this.areaType1 = row.areaType
            this.stationGenre1 = row.stationGenre
            this.stcd1 = row.stcdArray
        },
        // 表格里面的小icon删除
        bgshanchu(row) {
            // console.log(row);
            let arr = []
            // for (let i = 0; i < this.multipleSelection.length; i++) {
            //     arr.push(this.multipleSelection[i].id)
            // }
            arr.push(row.id)
            // 将数组内的值从小到大排序，
            arr.sort()
            let arr1 = arr.sort()
            // console.log(arr1);
            if (row.status == 2) {
                sjtqrwlbplsc(arr1).then(res => {
                    // console.log(res);
                    if (res.status == 200) {
                        this.$message({
                            type: 'success',
                            duration: 3000,
                            message: '删除成功'
                        })
                        this.sjtqrwlblist();
                    } else {
                        this.$message({
                            type: 'error',
                            duration: 3000,
                            message: '删除失败'
                        })
                    }
                })
            }
        },
        // 测站数量对话框查询
        czslcx() {
            const rwlbsldhkobj = {
                pageInfo: {
                    pageIndex: this.currentPage1,
                    pageSize: this.pagesize1
                },
                stationGenre: row.stationGenre,
                stcd: '',
                taskId: row.id
            }
            // console.log(rwlbsldhkobj);
            sjtqrwlbczsldhk(JSON.stringify(rwlbsldhkobj)).then(res => {
                // console.log(res);
                this.tableData1 = res.data.data.list
                this.total1 = res.data.data.total
            })
        },
        // 测站数量重置
        czslcz() {
            this.zxqkform.stcd = ''
            this.pagesize1 = 10
            this.currentPage1 = 1
            const rwlbsldhkobj = {
                pageInfo: {
                    pageIndex: this.currentPage1,
                    pageSize: this.pagesize1
                },
                stationGenre: row.stationGenre,
                stcd: '',
                taskId: row.id
            }
            // console.log(rwlbsldhkobj);
            sjtqrwlbczsldhk(JSON.stringify(rwlbsldhkobj)).then(res => {
                // console.log(res);
                this.tableData1 = res.data.data.list
                this.total1 = res.data.data.total
            })
        }
    }
}
</script>
<style lang="scss" scoped>
html,
body {
    height: 100%;
}

/* 整个任务列表 */
.rwlb {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    ::v-deep .rwlb-top {
        width: 97%;
        height: 20%;
        margin: 0 auto;
        /* display: flex; */
        justify-content: space-between;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .top1 {
            height: 50%;


            .el-form {
                /* width: 73%; */
                height: 50%;
                /* display: flex; */
                /* float: left; */
                /* border: 1px solid red; */
                /* box-sizing: border-box; */

                .el-form-item {
                    padding-top: .625rem;
                    padding-right: .5rem;
                    margin-right: 0;

                    .el-form-item__label {
                        background-color: #0055ab;
                        color: #fff;

                        .el-input {
                            width: 66px;

                            .el-input__inner {
                                width: 100%;
                            }
                        }
                    }
                }
            }

            .top1-button {
                height: 100%;
                float: right;
                margin-top: -18px;
            }
        }

        /* 顶部按钮 */
        .top-button {
            height: 50%;

            /* float: right; */
            .el-form {
                /* width: 73%; */
                height: 50%;
                /* display: flex; */
                /* float: left; */
                /* border: 1px solid red; */
                /* box-sizing: border-box; */

                .el-form-item {
                    padding-top: .625rem;
                    padding-right: .5rem;
                    margin-right: 0;

                    .el-form-item__label {
                        background-color: #0055ab;
                        color: #fff;

                        .el-input {
                            width: 66px;

                            .el-input__inner {
                                width: 100%;
                            }
                        }
                    }
                }
            }

            .top2-button {
                height: 100%;
                float: right;
                margin-top: -18px;
            }

            .el-button {
                background-color: #0055ab;
                color: #fff;

                .iconfont {
                    font-size: 14px;
                }
            }
        }
    }

    ::v-deep .rwlb-middle {
        width: 97%;
        height: 80%;
        margin: 0 auto;
        box-sizing: border-box;

        /* border: 1px solid red; */
        /* 表格 */
        .el-table {
            width: 100%;
            height: 80%;
            background-color: rgb(243, 243, 243);
            padding-top: 10px;

            .el-table__header-wrapper {}

            .el-table__body-wrapper {

                .iconfont {
                    cursor: pointer; //控制查看的小手
                }

                .el-icon-edit {
                    cursor: pointer; //控制编辑的小手
                }

                .el-icon-delete {
                    cursor: pointer; //控制删除的小手
                }
            }
        }

        /* 底部页码 */
        .bottom {
            width: 100%;
            height: 15%;

            .el-pagination {
                position: absolute;
                bottom: 3%;
                right: 6%;
            }
        }
    }

    ::v-deep .czsldhk .el-dialog {
        width: 80%;
        height: 72%;
        box-sizing: border-box;

        .el-dialog__header {
            /* width: 100%; */
            height: 12%;
            box-sizing: border-box;
        }

        /* 测站数量对话框标题的大小和颜色 */
        .dialog-title {
            .button-right {
                span {
                    font-size: 1.25rem;
                    color: #0055ab;
                }
            }
        }

        .el-dialog__body {
            width: 100%;
            height: 73%;
            padding: 0 20px;
            box-sizing: border-box;
            margin-bottom: 10px;

            .center {
                width: 100%;
                height: 100%;
                box-sizing: border-box;

                .el-form {
                    width: 100%;
                    height: 12%;

                    /* margin-bottom: 15px; */
                    .el-button {
                        background-color: #0055ab !important;
                        color: #fff !important;

                        .iconfont {
                            font-size: 14px;
                        }
                    }
                }

                .el-table {
                    width: 100%;
                    height: 88%;
                    box-sizing: border-box;
                    margin-top: 10px !important;

                    .el-table__cell gutter {
                        background-color: blue;
                    }
                }
            }
        }

        /* 测站数量对话框底部下载按钮 */
        .el-dialog__footer {
            width: 100%;
            height: 15%;
            text-align: center;
            box-sizing: border-box;

            .el-pagination {
                position: absolute;
                bottom: 3%;
                right: 6%;
            }
        }
    }
}

/* 控制top表单的宽度 */
/deep/.rwlb-top .el-input {
    width: 9rem !important;

    .el-input__inner {
        width: 100%;
    }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 2px; // 纵向滚动条 必写
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}

/* 表格的行高 */
/deep/ .tableBox {
    /* 列标题 */
    th {
        padding: 0 !important;
        height: 50px;
        line-height: 50px;
    }

    /* 内容 */
    td {
        padding: 0 !important;
        height: 40px;
        line-height: 40px;
    }
}


// 鼠标经过颜色
/deep/ .el-table__body tr:hover>td {
    background-color: #d9effe !important;
}

/* 列标题的字体颜色 */
/deep/ .el-table th.el-table__cell>.cell {
    color: #000;
}

/* 内容的字体颜色 */
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
    color: #000;
}

/* 查看和新增以及修改对话框 */
/deep/ .el-dialog {
    width: 60%;
    height: 70%;
    box-sizing: border-box;

    /* 查看对话框标题的大小和颜色 */
    .el-dialog__header {
        padding-bottom: 1.25rem;
        background-color: #eee;
        height: 12%;
        box-sizing: border-box;

        .dialog-title {
            .button-right {
                span {
                    font-size: 1.25rem;
                    color: #0055ab;
                }
            }
        }
    }

    .el-dialog__body {
        padding: 0 30px;
        margin-top: 10px;
        height: 73%;
        box-sizing: border-box;

        .el-form {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;

            .el-form-item {
                /* margin-bottom: .75rem; */

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;
                }

                .el-form-item__content {
                    width: 100%;

                    .el-select {
                        .el-input {
                            width: 100%;

                            .el-input__inner {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }

        .demo-form-inline {
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            .el-form-item {
                margin-bottom: .75rem;
                width: 50%;
                margin-right: 0;

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;
                }

                .el-form-item__content {
                    .el-input {
                        width: 100%;

                        .el-input__inner {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    /* 查看对话框底部下载按钮 */
    .el-dialog__footer {
        width: 100%;
        height: 15%;
        text-align: center;
        box-sizing: border-box;

        .el-button {
            background-color: blue;
            color: #fff;
            /* margin-top: -70px !important; */
        }
    }
}

/* 查看对话框标题的大小和颜色 */
/deep/ .dialog-title {
    .button-right {
        span {
            font-size: 1.25rem;
            color: #0055ab;
        }
    }
}

/* 表格隔行改变的颜色 */
/deep/ .el-table__row.statistiss-row {
    background-color: #f2faff;
}

/* 去掉滚动条上方的小方块背景色 */
/deep/ .el-table--border th.el-table__cell.gutter:last-of-type {
    background: rgb(243, 243, 243);
    border: none;
}

/deep/ .czsldhk .el-dialog {
    width: 80%;
    height: 72%;
    box-sizing: border-box;

    .el-dialog__header {
        /* width: 100%; */
        height: 12%;
        box-sizing: border-box;
    }

    /* 测站数量对话框标题的大小和颜色 */
    .dialog-title {
        .button-right {
            span {
                font-size: 1.25rem;
                color: #0055ab;
            }
        }
    }

    .el-dialog__body {
        width: 100%;
        height: 73%;
        padding: 0 1.25rem;
        box-sizing: border-box;

        .center {
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            .el-form {
                width: 100%;
                height: 12%;

                .el-form-item {
                    width: 50% !important;
                }
            }

            .el-table {
                width: 100%;
                height: 88%;
                box-sizing: border-box;
                margin-top: .625rem;

                .el-table__cell gutter {
                    background-color: blue;
                }
            }
        }
    }

    /* 测站数量对话框底部下载按钮 */
    .el-dialog__footer {
        width: 100%;
        height: 15%;
        text-align: center;
        box-sizing: border-box;

        .el-pagination {
            position: absolute;
            bottom: 3%;
            right: 6%;
        }
    }
}

/deep/ .el-dialog {
    .el-table {
        margin-top: .625rem;
    }
}

/deep/ .el-dialog__footer {
    width: 100%;
    height: 15%;
    text-align: center;
    box-sizing: border-box;

    .el-pagination {
        position: absolute;
        bottom: 3%;
        right: 6%;
    }
}

/deep/ .el-button {
    background-color: #0055ab !important;
    color: #fff !important;

    .iconfont {
        font-size: .875rem;
    }
}

/deep/ .el-radio-group {
    margin-left: .9375rem;
}

/deep/ .tqy {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 4.375rem !important;
            /* text-align: center !important; */
        }
    }
}

/deep/ .zhuangtai {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 3.375rem !important;
            /* text-align: center !important; */
        }
    }
}

/* 查看对话框，提取源 */
/deep/ .ckdhktqy {
    width: 50%;

    .el-form-item {
        .el-form-item__label {
            padding-right: 1.25rem;
            /* color: red !important; */
            /* width: 4.5rem !important; */
            /* text-align: center !important; */
        }
    }
}

/deep/ .xzdhktqsj {
    width: 50%;
}

/deep/.el-range-editor.el-input__inner {
    width: 13.875rem;
}

/* 控制新增对话框中单次循环的宽度 */
/* /deep/ .el-col-7 {
    width: 100%;
}

/deep/ .el-col-8 {
    width: 50%;
} */
/* /deep/ .el-date-picker {
    .el-picker-panel__body-wrapper {
        .el-picker-panel__body {
            .el-date-picker__header {
                span:nth-child(3) {
                    display: none;
                }

                button:nth-child(1) {
                    display: none;
                }

                button:nth-child(5) {
                    display: none;
                }
            }
        }
    }

} */
/deep/ .sfljzx {
    .el-form-item {
        .el-form-item__content {
            display: flex;
        }
    }
}

/* /deep/ .swdzcsts {
    display: inline-block;
    margin-left: 10px;
    color: red;
} */
</style>